<template>
  <div class="form">
              <el-form 
              :model="quesList" 
              class="demo-form-inline" 
              label-width="80px" 
              size="small"
              ref="quesListRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科" size="small" >
              <el-select v-model="quesList.subjectID" 
              placeholder="请选择"  
              @change="handleCatalogID({subjectID:quesList.subjectID})"
              style="width:100%">
                    <el-option
                      v-for="item in subjectOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" size="small">
              <el-select 
              v-model="quesList.catalogID" 
              placeholder="请选择" style="width:100%" 
              @blur="quesList.catalogID = ''">
                <el-option
                      v-for="item in catalogIDOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="small">
              <el-select v-model="quesList.tags" placeholder="请选择" style="width:100%">
                <el-option
                      v-for="item in tagsOption"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" size="small">
              <el-input v-model="quesList.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>          
          <el-col :span="6">
            <el-form-item label="试题类型" size="small">
              <el-select v-model="quesList.questionType" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in questionType"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="small">
              <el-select v-model="quesList.difficulty" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in difficulty"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="small">
              <el-select v-model="quesList.direction" placeholder="请选择" style="width:100%">
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" size="small">
              <el-select v-model="quesList.creatorID" placeholder="请选择" style="width:100%">
                <el-option
                      v-for="item in creatorOption"
                      :key="item.id"
                      :label="item.username"
                      :value="item.id">
                    </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" size="small">
              <el-input v-model="quesList.remarks"></el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="6">
            <el-form-item label="企业简称" size="small">
              <el-input v-model="quesList.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
                  <MyCity v-model="quesList.provAndCity"/>
                </el-form-item>
          </el-col>
          <el-col :span="6">
               <el-form-item size="small">
                <el-row type="flex" justify="end">
                  <el-button type="default" @click="clear">清除</el-button>
                  <el-button type="primary" @click="submitSearch">搜索</el-button>
                </el-row>
              </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
</template>

<script>
import MyCity from "../pages/companys/citys.vue"
import {simple as subSimple} from "@/api/hmmm/subjects"
import {simple as tagsSimple} from "@/api/hmmm/tags"
import {simple as usersSimple } from "@/api/base/users";
import {simple} from "@/api/hmmm/directorys"
import { questionType, difficulty, direction, publishType } from "@/api/hmmm/constants";
export default {
    data(){
        return {
        quesList: {
          subjectID: '',
          catalogID: '',
          tags: '',
          keyword: '',
          questionType:'',
          difficulty: '',
          direction:'',
          creatorID:'',
          remarks:'',
          shortName:'',
          provAndCity:'',
        },
        subjectOption:[],
        catalogIDOption: [],
        tagsOption:[],
        creatorOption:[],
        questionType: questionType,
        difficulty: difficulty,
        direction: direction,
        publishType:publishType,
        }
    },
    methods:{
      async handleCatalogID(data){
      this.quesList.catalogID = ''
      this.quesList.tags = ''
      const res = await simple(data)
      // console.log(res);
      this.catalogIDOption = res.data
      const tags = await tagsSimple()
      this.tagsOption = tags.data
    },
    // 获取学科列表
    async getSubjectOption(){
      const res = await subSimple()
      this.subjectOption = res.data
      const res1 = await usersSimple()
      this.creatorOption = res1.data
    },
    // 清除
    clear() {
      this.$refs.quesListRef.resetFields()
      this.quesList ={
        subjectID: '',
        catalogID: '',
        tags: '',
        keyword: '',
        questionType:'',
        difficulty: '',
        direction:'',
        creatorID:'',
        remarks:'',
        shortName:'',
        provAndCity:'',
      }
    },
    submitSearch(){
      this.$emit('submit-search',this.quesList)
    }
  },
  created(){
      this.getSubjectOption()
  },
  components:{
      MyCity
  }
}
</script>

<style>

</style>